<template>
  <div>
    <el-card class="box-card" v-show="isShow">
      <div slot="header" class="clearfix">
        <span>修改问卷</span>
        <el-button
          style="float: right; padding: 3px 0"
          type="text"
          @click="onSubmit"
          >确认</el-button
        >
      </div>
      <el-scrollbar class="scrollbarBox">
        <div class="box">
          <el-form ref="form" :model="Questionnaire" label-width="80px">
            <el-form-item label="问卷名称:">
              <el-input
                v-model="Questionnaire.name"
                style="width: 400px"
                :disabled="isState"
              ></el-input>
              <el-tag
                type="warning"
                style="margin-left: 22px; cursor: pointer; font-size: 12"
                @click="updateHeader"
                v-show="!isState"
                ><i class="el-icon-edit"></i> 修改
              </el-tag>
              <el-button
                type="primary"
                style="float: right"
                @click="isShowdrawer"
                >预览</el-button
              >
            </el-form-item>
            <el-form-item label="问卷说明:">
              <el-input
                v-model="Questionnaire.desc"
                :disabled="isState"
              ></el-input>
            </el-form-item>
            <div class="list">
              <div v-if="Questionnaire.group.length != 0">
                <div class="weightBox clearfix">
                  <el-table :data="tableData" style="width: 500px; float: left">
                    <el-table-column prop="name" label="题目组：" width="350">
                    </el-table-column>
                    <el-table-column label="权重" width="100">
                      <template slot-scope="scope">
                        <el-input
                          size="mini"
                          placeholder="权重"
                          type="number"
                          v-model="scope.row.weight"
                        />
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-tag
                    type="warning"
                    style="cursor: pointer; font-size: 12; float: right"
                    @click="updateWeights"
                    v-show="isShowTipStatus != 0"
                    ><i class="el-icon-edit"></i> 修改
                  </el-tag>
                </div>
                <div
                  class="item"
                  v-for="(item, index) in Questionnaire.group"
                  :key="index"
                >
                  <div class="itemTitle">
                    {{ index + 1 }}. (调研对象) + {{ item.name }}
                    <span class="weight">（权重：{{ item.weight }}%）</span>
                    <div style="float: right">
                      <el-tag
                        type="warning"
                        style="
                          margin-right: 10px;
                          cursor: pointer;
                          font-size: 12;
                        "
                        @click="updateCreateTopic(item.id, item)"
                        ><i class="el-icon-edit"></i> 修改
                      </el-tag>
                      <el-tag
                        v-if="!isState"
                        type="danger"
                        style="
                          margin-right: 10px;
                          cursor: pointer;
                          font-size: 12;
                        "
                        @click="deleteTopicObj(item.id)"
                        ><i class="el-icon-delete"></i> 删除
                      </el-tag>
                    </div>
                  </div>
                  <div class="itemObj">
                    是否必填：{{ item.required == 0 ? "必填" : "非必填" }}
                  </div>
                  <div class="itemObj">
                    调研对象：<span
                      v-for="(userinfo, index) in item.target"
                      :key="index"
                    >
                      {{ userinfo.name }}
                    </span>
                  </div>
                  <div class="itemMain">
                    <div class="itemScore">
                      <div
                        v-for="(score, index) in item.optionName.split(',')"
                        :key="index"
                      >
                        {{ score }}
                      </div>
                    </div>
                    <div
                      class="itemTip"
                      v-for="(tip, index) in item.group"
                      :key="index"
                    >
                      <div class="itemMainTitle">
                        {{ tip.name }}
                        <span class="weight">（权重：{{ tip.weight }}%）</span>
                      </div>
                      <div class="itemMainTitleRadio">
                        <div v-for="n in 4" :key="n">
                          <span></span>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="createItem"
                @click="adddateCreateTopic"
                v-if="!isState"
              >
                <span>添加题目</span>
              </div>
            </div>
          </el-form>
        </div>
      </el-scrollbar>
      <ShowUpdateTopic
        ref="child"
        @isShowCreateTopicMethod="isShowCreateTopicMethod"
        :isShow="isShowCreateTopic"
        @changeData="changeData"
      />
    </el-card>
    <!-- //抽屉 -->
    <el-drawer
      :withHeader="false"
      :visible.sync="drawer"
      :direction="direction"
      :size="drawerSize"
    >
      <div class="previewBox" v-if="previewQuestionnaireForm">
        <div class="previewTitle">
          {{ previewQuestionnaireForm.name }}
        </div>
        <div class="previewDesc">{{ previewQuestionnaireForm.desc }}</div>
        <div class="previewList">
          <div
            class="previewItem"
            v-for="(item, index) in previewQuestionnaireForm.group"
            :key="index"
          >
            <div class="previewItemTitle">{{ index + 1 }}、{{ item.name }}</div>
            <div class="previewItemBox">
              <div class="previewItemoptionNameList">
                <div
                  class="previewItemoptionNameItem"
                  v-for="(optionName, index) in item.optionName.split(',')"
                  :key="index"
                >
                  {{ optionName }}
                </div>
              </div>
              <div class="previewItemTwoTipList">
                <div
                  class="previewItemTwoTipItem"
                  v-for="(questions, index) in item.questions"
                  :key="index"
                >
                  <div class="previewItemTwoTipItemTitle">
                    {{ questions.name }}
                  </div>
                  <div class="previewItemTwoTipItemRadio">
                    <div v-for="n in 4" :key="n">
                      <span></span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </el-drawer>
  </div>
</template>
<script>
import ShowUpdateTopic from "./ShowUpdateTopic.vue";
import { $http } from "../../request/service";
export default {
  components: {
    ShowUpdateTopic,
  },
  data() {
    return {
      tableData: [],
      isShowTipStatus: 1,
      Questionnaire: {
        createTime: "",
        desc: "",
        group: [],
        id: "",
        name: "",
        status: "",
        type: "",
        updateTime: "",
        weight: "",
      },
      isState: false, //已发布
      previewQuestionnaireForm: null, //预览数据
      updateTipObj: null,
      isShowCreateTopic: false, //是否显示添加题
      //抽屉
      drawer: false,
      direction: "rtl",
      drawerSize: 400,
    };
  },
  props: ["isShow"],
  methods: {
    //请求获取问卷数据
    getUpdateQuestionnaire(id) {
      $http.get(`/survey/s/${id}`).then((res) => {
        if (res.code !== 200) return this.$message.error(res.message);
        this.isState = res.data.status == 0 ? false : true;
        this.Questionnaire = res.data;
        let groupList = [];
        res.data.group.forEach((item) => {
          groupList.push({
            name: item.name,
            weight: item.weight,
            id: item.id,
            surveyId: id,
          });
        });
        this.tableData = groupList;
      });
    },
    //更新数据
    changeData() {
      this.isShowCreateTopicMethod();
      setTimeout(() => {
        this.getUpdateQuestionnaire(this.Questionnaire.id);
      }, 100);
    },
    //批量修改权重
    updateWeights() {
      let number = 0;
      this.tableData.forEach((item) => {
        number += parseInt(item.weight);
      });
      if (number != 100) {
        this.$message.warning("所有题目权重总和必须是100！");
        return;
      }
      let data = {
        questionGroupList: [],
      };
      this.tableData.forEach((item) => {
        data.questionGroupList.push({
          id: parseInt(item.id),
          surveyId: parseInt(item.surveyId),
          weight: parseInt(item.weight),
        });
      });
      $http.put(`/survey/group/`, data).then((res) => {
        if (res.code !== 200) return this.$message.error(res.message);
        this.$message.success("问题组权重设置成功！");
        this.getUpdateQuestionnaire(this.Questionnaire.id);
      });
    },
    //显示预览题目
    isShowdrawer() {
      this.previewProcessingForm();
      this.drawer = true;
    },
    //预览处理数据
    previewProcessingForm() {
      let questionnaireForm = {
        type: "A",
        name: "请添写问卷名称",
        desc: "问卷说明",
        status: 0,
        weight: 0,
        group: [],
      };
      questionnaireForm.name =
        this.Questionnaire.name || questionnaireForm.name;
      questionnaireForm.desc =
        this.Questionnaire.desc || questionnaireForm.desc;
      let questionGroupVOS = [];
      this.Questionnaire.group.forEach((item) => {
        item.target.forEach((child) => {
          questionGroupVOS.push({
            name: child.name + item.name,
            optionName: item.optionName,
            weight: item.weight - 0,
            required: item.required,
            targetId: child.id,
            questions: item.group,
          });
        });
      });
      questionnaireForm.group = questionGroupVOS;
      this.previewQuestionnaireForm = questionnaireForm;
    },
    //提交题库
    onSubmit() {
      //批量修改权重
      let number = 0;
      this.Questionnaire.group.forEach((item) => {
        number += parseInt(item.weight);
      });
      if (number != 100) {
        this.$message.warning("所有题目权重总和必须是100！");
        return;
      } else {
        this.isShowUpdateQuestionnaire()
      }
    },
    //提交问卷请求
    getSubmitQuestionnaire() {},
    //删除录入题目值
    deleteTopicObj(id) {
      let index = parseInt(id);
      $http.delete(`/survey/group/${index}`).then((res) => {
        if (res.code !== 200) return this.$message.error(res.message);
        this.$message.success("问卷删除成功！,请重新输入所有问题权重");
        this.getUpdateQuestionnaire(this.Questionnaire.id);
      });
    },
    //关闭创建题库
    isShowUpdateQuestionnaire() {
      this.$emit("isShowUpdateQuestionnaire");
    },
    //打开题目组件
    isShowCreateTopicFun() {
      this.isShowCreateTopic = true;
    },
    //关闭添加题目
    isShowCreateTopicMethod() {
      this.isShowCreateTopic = false;
    },
    //打开添加题目
    adddateCreateTopic() {
      this.isShowCreateTopicFun(); //打开添加题目
      this.$refs.child.addChangeTip(this.isState, this.Questionnaire.id);
    },
    //打开修改题目
    updateCreateTopic(index, item) {
      this.isShowCreateTopicFun(); //打开添加题目
      this.$refs.child.updateChangeTip(index, item, this.isState);
    },
    //修改问卷头部
    updateHeader() {
      if (!this.Questionnaire.name) {
        this.$message.warning("请先填写问卷名称！");
        return;
      } else if (!this.Questionnaire.desc) {
        this.$message.warning("请先填写问卷简述！");
        return;
      }
      let obj = {
        desc: this.Questionnaire.desc,
        name: this.Questionnaire.name,
        status: 0,
        type: "问卷类型",
        weight: 0,
      };
      $http
        .put(`/survey/${this.Questionnaire.id}`, {
          ...obj,
        })
        .then((res) => {
          if (res.code !== 200) return this.$message.error(res.message);
          this.$message.success(res.message);
        });
    },
  },
};
</script>
<style  scoped>
.weightBox {
  height: 100%;
  padding: 0 20px;
  margin: 10px 0 20px;
}
.weightBoxTitle {
  font-size: 14px;
}
.previewBox {
  width: 100%;
  height: 100vh;
}
.previewBox .previewTitle {
  padding: 0 30px;
  width: 100%;
  line-height: 40px;
  color: #42a8e3;
  font-size: 18px;
}
.previewBox .previewDesc {
  text-align: left;
  padding: 0 10px;
  line-height: 30px;
  color: red;
  font-size: 14px;
  border-bottom: 1px dashed #ccc;
}
.previewItemBox {
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fafafa;
}
.previewList {
  box-sizing: border-box;
  width: 100%;
  text-align: left;
}
.previewList .previewItem {
  margin: 15px 22px;
}
.previewItem .previewItemTitle {
  line-height: 40px;
  font-weight: bold;
}
.previewItemoptionNameList {
  height: 46px;
  background-color: #e5e5e5;
  display: flex;
}
.previewItemoptionNameItem {
  width: 25%;
  line-height: 46px;
  text-align: center;
}
.previewItemTwoTipItemTitle {
  padding: 15px 18px 0;
  font-size: 14px;
}
.previewItemTwoTipItemRadio {
  display: flex;
  height: 40px;
}
.previewItemTwoTipItemRadio > div {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.previewItemTwoTipItemRadio > div > span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.scrollbarBox {
  height: calc(90vh - 80px);
}
.box-card {
  width: 50vw !important;
  min-width: 700px !important;
  position: fixed;
  height: 90vh;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 10;
}
.box {
  text-align: left;
}
.box .list {
  width: 100%;
  text-align: left;
  border: 1px solid #ebeef5;
  padding: 10px 20px;
  border-radius: 4px;
  min-height: 300px;
}
.box .list .item {
  padding: 5px 20px;
  border-radius: 4px;
}
.list .item .itemTitle {
  font-size: 16px;
  line-height: 30px;
}
.list .item .itemObj {
  line-height: 30px;
  font-size: 12px;
}
.list .item .itemMain {
  border: 1px solid #ccc;
  border-radius: 10px;
  overflow: hidden;
}
.itemMain .itemScore {
  display: flex;
  background-color: #e5e5e5;
}
.itemMain .itemScore > div {
  width: 25%;
  text-align: center;
  height: 40px;
  line-height: 40px;
  border-left: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.itemScore div:first-child {
  border-left: none;
}
.itemMain .itemTip {
  /* padding: 10px 0 5px; */
  padding-top: 5px;
  background: #f7f7f7;
}
.itemMain .itemTip .itemMainTitle {
  padding: 0 20px;
  font-size: 14px;
}
.itemMainTitleRadio {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
}
.itemMainTitleRadio > div {
  width: 25%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.itemMainTitleRadio > div > span {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid #ccc;
}
.weight {
  font-size: 12px;
  color: red;
}
.box .list .createItem {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 15px;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
</style>